import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { Form, Icon, Input, Button, message, Spin } from "antd";
import { connect } from "react-redux";
import DocumentTitle from "react-document-title";
import "./index.less";
import { login, getUserInfo } from "@/store/actions";

const Login = (props) => {
    const { form, token, login, getUserInfo } = props;
    const { getFieldDecorator } = form;

    const [loading, setLoading] = useState(false);

    const handleLogin = (username, password) => {
        // 登录完成后 发送请求 调用接口获取用户信息
        setLoading(true);
        login(username, password)
            .then((data) => {
                message.success("登录成功");
                handleUserInfo(data.token);
            })
            .catch((error) => {
                setLoading(false);
                message.error(error);
            });
    };

    // 获取用户信息
    const handleUserInfo = (token) => {
        getUserInfo(token)
            .then((data) => {})
            .catch((error) => {
                message.error(error);
            });
    };

    const handleSubmit = (event) => {
        // 阻止事件的默认行为
        event.preventDefault();

        // 对所有表单字段进行检验
        form.validateFields((err, values) => {
            // 检验成功
            if (!err) {
                const { username, password } = values;
                handleLogin(username, password);
            } else {
                console.log("检验失败!");
            }
        });
    };

    if (token) {
        return <Redirect to="/dashboard" />;
    }
    return (
        <DocumentTitle title={"后台管理系统"}>
            {/* 登录框设计 */}
            <div className="login-container">
                <div className="wife">
                    <div className='wifeimg'><img src="https://api.hiehie.top:6001/images/utaha.jfif" alt="无法显示" style={{width:50,height:50,borderRadius:50}}/></div>
                    <div className='text1'>诗羽酱超级可爱哦！</div>
                    <div className='text2'>詩羽ちゃん大好き!</div>
                </div>
                <Form onSubmit={handleSubmit} className="content">
                    <div className="title">
                        <h2>用户登录</h2>
                    </div>
                    <Spin spinning={loading} tip="登录中...">
                        <Form.Item>
                            {getFieldDecorator("username", {
                                rules: [
                                    {
                                        required: true,
                                        whitespace: true,
                                        message: "请输入您的用户名",
                                    },
                                ],
                                //initialValue: "admin",
                                // 初始值
                            })(
                                <Input
                                    prefix={
                                        <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                                    }
                                    placeholder="Username"
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator("password", {
                                rules: [
                                    {
                                        required: true,
                                        whitespace: true,
                                        message: "请输入您的密码",
                                    },
                                ],
                                //initialValue: "123456",
                                // 初始值
                            })(
                                <Input
                                    prefix={
                                        <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                                    }
                                    type="password"
                                    placeholder="Password"
                                />
                            )}
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>

                        {/* <Form.Item>
                            <span>账号 : admin 密码 : 随便填</span>
                            <br />
                            <span>账号 : editor 密码 : 随便填</span>
                            <br />
                            <span>账号 : guest 密码 : 随便填</span>
                        </Form.Item> */}
                    </Spin>
                </Form>
            </div>
        </DocumentTitle>
    );
};

const WrapLogin = Form.create()(Login);

export default connect((state) => state.user, { login, getUserInfo })(WrapLogin);
